<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"
    name="viewport">
  <link rel="stylesheet" href="./panda.css">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
    }

    body {
      padding-top: 100px;
      overflow: hidden;
    }

    .wrapper {
      width: 477px;
      height: 555px;
      margin: 0 auto;
      position: relative;
    }

    .body {
      width: 100%;
      height: 100%;
      border: 3px solid #333333;
      border-radius: 46% 46% 49% 49%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
      background-color: #fff;
    }

    .ear {
      width: 73px;
      height: 73px;
      background-color: #0F0F10;
      border-radius: 50px;
      position: absolute;
    }

    .ear_l {
      left: 66px;
      top: 11px;
    }

    .ear_r {
      right: 66px;
      top: 11px;
    }

    .arm {
      width: 172px;
      height: 88px;
      background-color: #0F0F10;
      border-radius: 50px;
      position: absolute;
    }

    .arm_l {
      left: -143px;
      top: 225px;
      transform-origin: 172px 39px;
      transform: rotate(-55deg);
      border-radius: 50% 30% 50px 50px;
      animation: 2s ease-in-out 1.1s infinite lRotate;
    }

    @keyframes lRotate {
      0% {
        transform: rotate(-55deg);
      }

      10% {
        transform: rotate(-60deg);
        box-shadow: 0 10px 10px rgba(15, 15, 16, .3);
      }

      20% {
        transform: rotate(-50deg);
      }

      30% {
        transform: rotate(-58deg);
      }

      40%,
      50%,
      60%,
      70%,
      80%,
      90%,
      100% {
        transform: rotate(-55deg);
      }
    }

    .arm_r {
      right: -140px;
      top: 202px;
      transform: rotate(-58deg);
      border-radius: 80% 50px 80px 80%;
      transform-origin: 0 39px;
      animation: 2s ease-in-out 1s infinite rRotate;
    }

    @keyframes rRotate {
      0% {
        transform: rotate(-58deg);
      }

      10% {
        transform: rotate(-72deg);
        box-shadow: 0px -10px 10px rgba(15, 15, 16, .3);
      }

      20% {
        transform: rotate(-45deg);
        box-shadow: 0 10px 10px rgba(15, 15, 16, .3);
      }

      30% {
        transform: rotate(-70deg);
        box-shadow: 0px -10px 10px rgba(15, 15, 16, .3);
      }

      40%,
      50%,
      60%,
      70%,
      80%,
      90%,
      100% {
        transform: rotate(-58deg);
      }
    }

    .heart {
      position: absolute;
      right: 54px;
      top: 25px;
      transform: rotate(30deg);
    }

    .heart_l {
      width: 45px;
      height: 30px;
      background-color: #ad2025;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 0 50% 50% 0;
    }

    .heart_r {
      width: 45px;
      height: 30px;
      background-color: #ad2025;
      position: absolute;
      top: -8px;
      left: -8px;
      border-radius: 0 50% 50% 0;
      transform: rotate(-90deg);
    }

    .leg {
      width: 100px;
      height: 145px;
      background-color: #0F0F10;
      position: absolute;
      bottom: -60px;
    }

    .leg_l {
      left: 96px;
      border-radius: 16% 70% 30% 50px;
      transform: rotate(-3deg);
    }

    .leg_r {
      left: 269px;
      bottom: -63px;
      border-radius: 70% 16% 50px 30%;
      transform: rotate(4deg);
    }

    .face {
      width: 400px;
      height: 352px;
      position: absolute;
      left: 44px;
      top: 34px;
      border: 3px solid #66E085;
      border-radius: 93% 90% 75% 74%;
      z-index: 5;
    }

    .line {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 93% 90% 75% 74%;
    }

    .line1 {
      width: 394px;
      height: 346px;
      border: 2px solid #F921E7;
    }

    .line2 {
      width: 390px;
      height: 342px;
      border: 3px solid #EDEC59;
      left: 2px;
      top: 2px;
    }

    .line3 {
      width: 378px;
      height: 330px;
      left: 8px;
      top: 8px;
      background-color: #fff;
    }

    .line3::after {
      position: absolute;
      content: '';
      top: -3px;
      bottom: -3px;
      left: -3px;
      right: -3px;
      background: linear-gradient(217deg, rgba(1, 129, 200, .3), rgba(255, 0, 0, 0) 70.71%),
        linear-gradient(127deg, rgba(1, 129, 200, 1), rgba(0, 255, 0, 0) 70.71%),
        linear-gradient(60deg, rgba(1, 129, 200, .1), rgba(0, 0, 255, 0) 70.71%),
        linear-gradient(336deg, rgba(33, 41, 238, 1), rgba(0, 0, 255, 0) 70.71%);
      border-radius: 30px;
      z-index: -1;
      border-radius: 93% 90% 75% 74%;
    }

    .line4 {
      width: 378px;
      height: 330px;
      left: 8px;
      top: 8px;
      border: 3px solid #A3F1FE;
    }

    .eye {
      width: 172px;
      height: 110px;
      background-color: #0F0F10;
      border-radius: 60%;
      position: absolute;
    }

    .eye_l {
      left: 24px;
      top: 80px;
      transform: rotate(-45deg);
    }

    .eye_r {
      right: 8px;
      top: 80px;
      transform: rotate(-135deg) scaleY(-1);
    }

    .eye .eye-c1 {
      width: 70px;
      height: 70px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      right: 33px;
      top: 26px;
    }

    .eye .eye-c2 {
      width: 60px;
      height: 60px;
      background-color: #423e37;
      border-radius: 50%;
      position: absolute;
      right: 4px;
      top: 5px;
    }

    .eye .eye-c3 {
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      right: 7px;
      top: 11px;
    }

    .eye_r .eye-c3 {
      right: 11px;
      top: 6px;
    }

    .nose {
      width: 43px;
      height: 34px;
      border-radius: 100%;
      background-color: #0F0F10;
      position: absolute;
      top: 140px;
      left: 189px;
      z-index: 8;
    }

    .nose-c {
      width: 26px;
      height: 15px;
      border-radius: 100%;
      background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
      margin: 0 auto;
      margin-top: 4px;
    }

    .mouth {
      width: 110px;
      height: 40px;
      position: absolute;
      top: 160px;
      left: 151px;
      z-index: 3;
      /* 设置border-bottom在ios手机上边也会有一点点边框颜色 */ /* border-bottom: 3px solid #0F0F10;
      */ box-shadow: 0 2px #0F0F10;
      border-radius: 100%;
      background-color: #fff;
    }

    .mouth-c {
      width: 88px;
      height: 36px;
      position: absolute;
      top: 172px;
      left: 162px;
      border-bottom: 2px solid #0F0F10;
      border-radius: 100%;
      margin: 0 auto;
      z-index: 1;
      background-color: #A51320;
    }
  </style>
  <title>冰墩墩</title>
</head>

<body>
  <div class="wrapper" id="bingdd">
    <div class="body"></div>
    <div class="ear ear_l"></div>
    <div class="ear ear_r"></div>
    <div class="arm arm_l"></div>
    <div class="arm arm_r">
      <div class="heart">
        <div class="heart_l"></div>
        <div class="heart_r"></div>
      </div>
    </div>
    <div class="leg leg_l"></div>
    <div class="leg leg_r"></div>
    <div class="face">
      <div class="line line1"></div>
      <div class="line line2"></div>
      <div class="line line3"></div>
      <div class="line line4"></div>
      <div class="eye eye_l">
        <div class="eye-c1">
          <div class="eye-c2">
            <div class="eye-c3"></div>
          </div>
        </div>
      </div>
      <div class="eye eye_r">
        <div class="eye-c1">
          <div class="eye-c2">
            <div class="eye-c3"></div>
          </div>
        </div>
      </div>

      <div class="nose">
        <div class="nose-c"></div>
      </div>
      <div class="mouth"></div>
      <div class="mouth-c"></div>
    </div>
  </div>
  <script>
    const wWidth = window.innerWidth;
    if (wWidth < 666) {
      const bdd = document.getElementById('bingdd');
      bdd.style.zoom = `${wWidth / 666}`;
    }
  </script>
</body>

</html>